import React from "react";
import {
  Divider,
  List,
  ListItem,
  ListItemText,
  Typography,
} from "@mui/material";
import { Link } from "react-router-dom";
import "./styles.css";
import axios from 'axios';
/**
 * Define UserList, a React component of CS142 Project 5.
 */
class UserList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const users = window.cs142models.userListModel();
    const usersList = users.map((item, index) => (
        <ListItem key={index}>
          <Link to={`/users/${item._id}`} style={{ color: 'inherit', textDecoration: 'none' }}>
            <ListItemText primary={`${item.first_name}`+" "+`${item.last_name}`}/>
          </Link>
        </ListItem>
    ));
    return (
      <div>
        <Typography variant="body1" style={{fontSize:"30px"}}>
          Users List
        </Typography>
        <List component="nav">
        {usersList.map((user, index) => (
          <div key={index}>
            {user}
            <Divider />
          </div>
        ))}
        </List>
      </div>
    );
  }
}

export default UserList;
